{extend name="indexextends"}


{block name="title"}文章管理{/block}

{block name='artManage'}layui-this{/block}



{block name='nr'}

<!--编辑器个性样式-->
<style>
    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
    }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 800px; }
</style>

<div class="layui-form" >



    <div style="float: left;margin-left: 30px">
        栏目&nbsp;&nbsp;
        <div class="layui-input-inline">
            <select name="column" lay-verify="required" id="column">
                <option value=""></option>
                {volist name="column" id="v"}
                <option value="{$v.id}">{$v.name}</option>
                {/volist}
            </select>
        </div>
    </div>


    <button class="layui-btn" data-type="reload" id="Search">搜索</button>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delet">删除文章</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="update">批量更新/生成文章</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="column_update">栏目文章更新生成</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="bdts">推送百度文章收录</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑文章</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="view">浏览文章</a>
</script>

<p></p>
{/block}


<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

{block name="js"}

<!-- 引入 wangEditor.min.js -->



<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'{:url("admin/Artmanage/show")}'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                ,{field:'title', title:'主题', width:600, }
                ,{field:'time', title:'更新时间', width:250, }
                ,{field:'column_name', title:'所属栏目', width:120, }
                ,{field:'static', title:'静态页面', width:120, templet:function (d){
                        if (d.static=='1'){
                            return "已生成"
                        }else {
                            return "未生成"
                        }

                    }}
                ,{field:'column_id', title:'栏目id', width:120, hide:true}
                ,{field:'thumbnail', title:'缩略图地址', width:120, hide:true}
                ,{field:'static', title:'是否为静态页面', width:120, hide:true}
                ,{field:'url', title:'文章链接', width:120,hide:true }
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:250}
            ]]
            ,page: true
            ,id: 'idTest'
            ,limits:[10,50,100]
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data //被选中的文章的所有数据内容
            switch(obj.event){
                case 'delet'://删除文章

                    $.ajax({
                        url: "{:url('admin/Artmanage/deleteArt')}",
                        data:{
                            "datas":data
                        },
                        type: 'post',
                        success:function (res){

                            if (res['code']>0){
                                layer.msg(res['message'], {time:2000},function(){
                                    setTimeout('window.location.reload()',1000);
                                });
                            }else {
                                layer.msg(res['message'])
                            }

                        }

                    })
                    break;
                case 'update'://批量更新
                    $.ajax({
                        url: "{:url('admin/Artmanage/updateArt')}",
                        data:{
                            "datas":data
                        },
                        type: 'post',
                        success:function (res){

                            layer.msg(res['message'], {time:2000},function(){
                                setTimeout('window.location.reload()',1000);
                            });
                        }

                    })
                    break;

                case 'column_update':
                    column_update();
                    break;

                case 'bdts':
                    $.ajax({
                        url: "{:url('admin/Artmanage/bd_send')}",
                        data:{
                            "datas":data
                        },
                        type: 'post',
                        success:function (res){

                            layer.msg(res['message'], {time:2000},function(){

                            });
                        }

                    })
                    break;


            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;

            if(obj.event === 'view'){
                //预览文章

                window.open("Preview?id="+data.id)

            } else if(obj.event === 'edit'){
                //修改文章

                EditArt(data);

            }
        });

        //数据表格重载
        $("#Search").click(function (){

            //alert($("#date1").val())

            table.reload('idTest', {
                where: { //设定异步数据接口的额外参数，任意设
                    columnId: $("#column").val(),
                    //…
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据

        })

    });








    //文章修改
    function EditArt(datas){
        var addHtml="<form  enctype=\"multipart/form-data\" method=\"post\" class=\"layui-form\" style=\"width: 1300px;height:850px;margin: 0px auto\" id=\"forms\" >\n" +
            "\n" +
            "    <div class=\"layui-form-item\">\n" +
            "\n" +
            "\n" +
            "        <div class=\"layui-form-item\">\n" +
            "            <label  class=\"layui-form-label\"><span style=\"color: red\">*</span>栏目</label>\n" +
            "            <div class=\"layui-input-block\">\n" +
            "                <input type=\"text\" name=\"treeid\" id=\"tree\" lay-filter=\"tree\" class=\"layui-input\" >\n" +
            "            </div>\n" +
            "        </div>\n" +
            "\n" +
            "        <div class=\"layui-form-item\">\n" +
            "            <label class=\"layui-form-label\"><span style=\"color: red\">*</span>文章标题</label>\n" +
            "            <div class=\"layui-input-block\">\n" +
            "                <input type=\"text\" name=\"title\" lay-verify=\"title\" autocomplete=\"off\" placeholder=\"请输入标题\" class=\"layui-input\" value='"+datas.title+"'>\n" +
            "            </div>\n" +
            "        </div>\n" +
            "\n" +
            "\n" +
            "        <div class=\"layui-form-item\" >\n" +
            "            <label class=\"layui-form-label\">发布时间</label>\n" +
            "            <div class=\"layui-input-inline\">\n" +
            "                <input type=\"text\" class=\"layui-input\" id=\"test1\" placeholder=\"选择发布时间\" name=\"time\">\n" +
            "            </div>\n" +
            "        </div>\n" +
            "\n" +
            "        <div class=\"layui-form-item\">\n" +
            "            <label class=\"layui-form-label\">上传缩略图</label>\n" +
            "        <div class=\"layui-upload\" >\n" +
            "            <button type=\"button\" class=\"layui-btn\" id=\"test2\">上传图片</button>\n" +
            "            <input type=\"hidden\" name=\"thumbnailUrl\" id=\"thumbnailUrl\" value='"+datas.thumbnail+"'>\n" +
            "            <div class=\"layui-upload-list\" style=\"margin-left: 9%\">\n" +
            "                <img class=\"layui-upload-img\" id=\"demo1\" style=\"width: 10%\" src='"+datas.thumbnail+"'>\n" +
            "                <p id=\"demoText\" ></p>\n" +
            "            </div>\n" +
            "\n" +
            "            <div  style=\"width: 95px;margin-left: 9%\">\n" +
            "                <div class=\"layui-progress layui-progress-big\" lay-showpercent=\"yes\" lay-filter=\"demo\">\n" +
            "                    <div class=\"layui-progress-bar\" lay-percent=\"\"></div>\n" +
            "                </div>\n" +
            "            </div>\n" +
            "\n" +
            "\n" +
            "        </div>\n" +
            "        </div>\n" +
            "    </div>\n" +
             "<div id=\'editor—wrapper\' style=\'width: 90%;margin: 0px auto;\'>\n"+
                    "<div id=\'toolbar-container\'><!-- 工具栏 --></div>\n"+
                    "<div id=\'editor-container\'><!-- 编辑器 --></div>\n"+
             "</div>\n"+
            "</form>"




        //树形选择框
        layui.config({
            base: '__ROOT__/public/static/layui/'
        }).extend({
            treeSelect: 'treeSelect'
        });
        layui.use(['treeSelect', 'form', 'layer'], function () {
            var treeSelect= layui.treeSelect,
                form = layui.form,
                $ = layui.jquery,
                layer = layui.layer;

            treeSelect.render({
                // 选择器
                elem: '#tree',
                // 数据
                data: '{:url("admin/column/sendChooseColumn")}',
                // 异步加载方式：get/post，默认get
                type: 'post',
                // 占位符
                placeholder: '选择栏目',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                // 一些可定制的样式
                style: {
                    folder: {
                        enable: true
                    },
                    line: {
                        enable: true
                    }
                },
                // 点击回调
                click: function(d){
                    // console.log(d);

                },
                // 加载完成后的回调函数
                success: function (d) {

                    //弹出层打开时，获取之前选择的栏目id，然后初始化节点
                    treeSelect.checkNode('tree', datas.column_id);

                    // console.log($('#tree').val());

                    // 获取zTree对象，可以调用zTree方法
                    var treeObj = treeSelect.zTree('tree');

                    treeSelect.refresh('tree');
                }
            });

        });


        layui.use('laydate', function(){
            var laydate = layui.laydate;
            var myeditor;//全局化变量，等弹出层打开后复制给这个变量



            //监听提交
            layer.open({
                type: 1,
                title: '文章修改',
                content: addHtml,
                btn: ['提交', '取消'],
                success:function (){

                    //缩略图上传
                    layui.use(['upload', 'element', 'layer'], function() {
                        var $ = layui.jquery
                            , upload = layui.upload
                            , element = layui.element
                            , layer = layui.layer;



                        var uploadInst = upload.render({
                            size:2048
                            ,elem: '#test2'
                            ,url: '{:url("admin/Article/thumbnailUpload")}' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                            ,before: function(obj){
                                //预读本地文件示例，不支持ie8
                                obj.preview(function(index, file, result){
                                    $('#demo1').attr('src', result); //图片链接（base64）
                                });

                                element.progress('demo', '0%'); //进度条复位
                                layer.msg('上传中', {icon: 16, time: 0});
                            }
                            ,done: function(res){
                                //如果上传失败
                                if(res.code > 0){
                                    return layer.msg('上传失败');
                                }
                                //上传成功的一些操作
                                //……
                                $('#demoText').html(''); //置空上传失败的状态

                                $("#thumbnailUrl").val(res.data.src)//将隐藏域的value值设置为缩略图的url，便于表单提交
                            }
                            ,error: function(){
                                //演示失败状态，并实现重传
                                var demoText = $('#demoText');
                                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                                demoText.find('.demo-reload').on('click', function(){
                                    uploadInst.upload();
                                });
                            }
                            //进度条
                            ,progress: function(n, elem, e){
                                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                                if(n == 100){
                                    layer.msg('上传完毕', {icon: 1});
                                }
                            }
                        });


                    });

                    //弹出层打开后渲染日期
                    layui.use('laydate', function(){
                        var laydate = layui.laydate;
                        //执行一个laydate实例
                        laydate.render({
                            elem: '#test1' //指定元素
                            ,type:'datetime'
                            ,value:datas.time
                        });
                    });




                    const { createEditor, createToolbar } = window.wangEditor

                    const editorConfig = {
                        scroll:true,
                        placeholder: 'Type here...',
                        onChange(editor) {
                            const html = editor.getHtml()
                            // console.log('editor content', html)
                            // 也可以同步到 <textarea>
                        },
                        MENU_CONF: {
                            uploadImage:{

                                server:'{:url("admin/Article/imgUpload")}',

                                // form-data fieldName ，默认值 'wangeditor-uploaded-image'
                                fieldName: 'myFileName',

                                // 单个文件的最大体积限制，默认为 2M
                                maxFileSize: 1 * 1024 * 1024, // 1M

                                // 最多可上传几个文件，默认为 100
                                maxNumberOfFiles: 10,

                                // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                                allowedFileTypes: ['image/*'],

                                // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                                meta: {
                                    token: 'xxx',
                                    otherKey: 'yyy'
                                },

                                // 将 meta 拼接到 url 参数中，默认 false
                                metaWithUrl: false,

                                // 自定义增加 http  header
                                headers: {
                                    Accept: 'text/x-json',
                                    otherKey: 'xxx'
                                },

                                // 跨域是否传递 cookie ，默认为 false
                                withCredentials: true,

                                // 超时时间，默认为 10 秒
                                timeout: 5 * 1000, // 5 秒
                            },
                            uploadVideo:{
                                server: '{:url("admin/Article/videoUpload")}',
                                // form-data fieldName ，默认值 'wangeditor-uploaded-video'
                                fieldName: 'your-custom-name',

                                // 单个文件的最大体积限制，默认为 10M
                                maxFileSize: 30 * 1024 * 1024, // 30M

                                // 最多可上传几个文件，默认为 5
                                maxNumberOfFiles: 3,

                                // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
                                allowedFileTypes: [],

                                // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                                meta: {
                                    token: 'xxx',
                                    otherKey: 'yyy'
                                },

                                // 将 meta 拼接到 url 参数中，默认 false
                                metaWithUrl: false,

                                // 自定义增加 http  header
                                headers: {
                                    Accept: 'text/x-json',
                                    otherKey: 'xxx'
                                },

                                // 跨域是否传递 cookie ，默认为 false
                                withCredentials: true,

                                // 超时时间，默认为 30 秒
                                timeout: 15 * 1000, // 15 秒

                                // 视频不支持 base64 格式插入
                            }
                        }

                    }

                    const editor = createEditor({
                        selector: '#editor-container',
                        html: '<p><br></p>',
                        config: editorConfig,
                        mode: 'default', // or 'simple',
                    })
                    const toolbarConfig = {}

                    const toolbar = createToolbar({
                        editor,
                        selector: '#toolbar-container',
                        config: toolbarConfig,
                        mode: 'default', // or 'simple'
                    })

                    //弹出层打开时渲染文章内容
                    $.ajax({
                        url:"{:url('admin/Artmanage/get_content')}",
                        type:"get",
                        data:{"id":datas.id},
                        success:function (res){
                            res=$.parseJSON(res)
                            content=res['content']//文章内容
                            editor.setHtml(content)
                        }
                    })


                    myeditor=editor;//赋值给全局变量


                },yes:function (layIndex) {
                    // layer.close(layIndex)

                    $('#forms').ajaxSubmit({
                        url:"{:url('admin/Artmanage/editArt')}",
                        type:"Post",
                        data:{
                            "columnId":$("#tree").val(),
                            "id":datas.id,
                            "text": myeditor.getText(),//文章纯文本内容，不含html标签
                            "html":myeditor.getHtml()
                        },
                        success: function (rsps) {

                            if (rsps.code>0){
                                layer.msg(rsps.message);
                                setTimeout(function() {
                                    location.reload(true)//页面刷新
                                }, 1000);
                            }


                        }
                    });
                }
            });
            //});
        });


    }

    //根据栏目更新文章
    function column_update(){
        var addHtml = '<form id="form" class="layui-form"  style="width:90%; margin-top: 2%;">\
                        \<div class="layui-form-item">\
                        \<label class="layui-form-label">栏目</label>\
                    \<div class="layui-input-block">\
                       \ <select name="column" lay-verify="required" id="id">\
                           \ <option value=""></option>\
                           {volist name="column" id="v"}\
                            \<option value="{$v.id}">{$v.name}</option>\
                            {/volist}\
                        \</select>\
                    \</div>\
                        \ </div>\
                      \</form>\
                      ';


        layui.use('layer', function(){
            var layer = layui.layer;
            var form = layui.form;

            layer.open({
                type: 1,
                title: '根据栏目更新并生成文章',
                content: addHtml,
                area:['500px','350px'],
                btn: ['提交', '取消'],
                success:function () {
                    form.render();//弹出层打开时重载表单，不然select会打不开



                },yes:function (layIndex) {
                    layer.close(layIndex)
                    $('#form').ajaxSubmit({
                        url:"{:url('admin/Artmanage/column_update')}",
                        type:"Post",
                        data:{
                            "columnId":$("#id").val(),
                        },
                        success: function (rsps) {

                            if (rsps.code>0){
                                layer.msg(rsps.message);
                                setTimeout(function() {
                                    location.reload(true)//页面刷新
                                }, 1000);
                            }else {
                                layer.msg(rsps.message);
                            }


                        }
                    });


                }

            })
        });



    }




</script>

{/block}
